@import 'history';
@import 'play-again';

.storm--end {
  display: grid;

  &__high {
    grid-area: high;
  }

  &__score {
    grid-area: score;
  }

  &__stats {
    grid-area: stats;
  }

  &__history {
    grid-area: history;
  }

  .storm-play-again {
    grid-area: play;
  }

  grid-row-gap: $block-gap;
  grid-column-gap: $block-gap;
  grid-template-areas: 'high' 'score' 'play' 'stats' 'history';

  @include breakpoint($mq-col2) {
    grid-template-areas: 'high high' 'score stats' 'play play' 'history history';
  }

  &__high {
    @extend %box-neat;

    padding: 1.5em 1.5em;
    background: $c-brag;
    color: $c-brag-over;

    &__content {
      @extend %flex-between;

      @include breakpoint($mq-col2) {
        &::before,
        &::after {
          content: ' ';
          width: 7em;
          height: 7em;
          margin: 3em;
          background-image: img-url('icons/tornado-white.svg');
          background-size: cover;
        }
      }
    }

    &__text {
      @extend %flex-column;

      align-items: center;
      margin: auto;

      strong {
        font-size: 2.5em;
        margin: 0.5em 0;
      }
    }
  }

  &__stats {
    @extend %flex-center;

    padding: 2vh var(--box-padding);
    align-items: stretch;

    table {
      width: 100%;

      td {
        padding: 0.5em 1em;
        text-align: right;

        number {
          font-size: 2em;
          font-family: 'storm';
        }
      }
    }
  }

  &__score {
    @extend %box-neat, %flex-column;

    justify-content: center;
    align-items: center;
    background: $c-good;
    color: $c-good-over;
    padding: 1em 0;

    @include breakpoint($mq-xx-small) {
      padding: 1em 3em;
    }

    &__number {
      font-family: 'storm';
      width: 3ch;
      text-align: center;
      font-size: 11em;

      @include breakpoint($mq-xx-small) {
        font-size: 14em;
      }
    }
  }
}
